<template>
	<!-- 首页功能快捷入口 Grid宫格-->
	<view style="padding: 10px 0;">

		<uni-grid :column="4" :showBorder="false" @change="onChange">
			<uni-grid-item v-for="(item, i) in homeItems" :index="i" :key="i">
				<view class="grid-item-box">
					<image :src="item.img" class="image" mode="aspectFill" />
					<text class="text">{{ item.title }}</text>
				</view>
			</uni-grid-item>
		</uni-grid>

	</view>

</template>

<script>
	export default {
		name: 'homeEnter',
		data() {
			return {
				//首页快捷功能入口
				homeItems: [{
						title: '新闻资讯',
						routePath: '/pages/working/working',
						img: '/static/image/menu1.png'
					},
					{
						title: '图片分享',
						routePath: '/pages/working/working',
						img: '/static/image/menu2.png'
					},
					{
						title: '商品购买',
						routePath: '/pages/working/working',
						img: '/static/image/menu3.png'
					},
					{
						title: '留言反馈',
						routePath: '/pages/working/working',
						img: '/static/image/menu4.png'
					},
					{
						title: '视频专区',
						routePath: '/pages/working/working',
						img: '/static/image/menu5.png'
					},
					{
						title: '联系我们',
						routePath: '/pages/working/working',
						img: '/static/image/menu6.png'
					}
				]
			};
		},

		methods: {
			onChange(e) {
				let index = e.detail.index;
				//路由跳转到首页
				uni.navigateTo({
					url: this.homeItems[index].routePath
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.image {
		width: 50rpx;
		height: 50rpx;
	}

	.text {
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
</style>